<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar";
import { PlusForm, PlusSearch } from "plus-pro-components";

import { type Ref, ref } from "vue";
import {
  ruleFormRef,
  newFormInline,
  paymentmethodList,
  useSearchTable,
  handleSubmit
} from "./utils/hook";

// 表格实例
const tableRef = ref();
const {
  searchColumns,
  tableColumns,
  searchList,
  selectedNum,
  searchState,
  pagination,
  onSelectionCancel,
  handleSelectionChange,
  getSelectedRows,
  handleSearch,
  handlePageChange,
  handleSizeChange
} = useSearchTable(tableRef);
</script>

<template>
  <div>
    <el-row>
      <!-- 新增回款 -->
      <el-col :span="10">
        <el-card shadow="never">
          <template #header>
            <span>新增回款</span>
          </template>
          <el-form ref="ruleFormRef">
            <el-row>
              <el-col>
                <el-form-item label="商品订单" prop="orderid">
                  <el-select
                    class="!w-[550px]"
                    v-model="newFormInline.orderIds"
                    clearable
                    placeholder="请输入商品订单号"
                    multiple
                  >
                    <!-- <el-option
                      v-for="item in selectOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    /> -->
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="回款金额" prop="totalAmount">
                  <el-input
                    class="!w-[200px]"
                    v-model.number="newFormInline.totalAmount"
                    type="number"
                    clearable
                    placeholder="请输入回款金额"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="流水单号" prop="paymentSn">
                  <el-input
                    class="!w-[200px]"
                    v-model="newFormInline.paymentSn"
                    clearable
                    placeholder="请输入流水单号"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="回款日期" prop="paidAt">
                  <el-date-picker
                    class="!w-[200px]"
                    v-model="newFormInline.paidAt"
                    type="date"
                    placeholder="请选择回款日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="回款方式" prop="paymentMethod">
                  <el-select
                    v-model="newFormInline.paymentMethod"
                    placeholder="请选择回款方式"
                    class="!w-[200px]"
                  >
                    <el-option
                      v-for="(item, index) in paymentmethodList"
                      :key="index"
                      :label="item.name"
                      :value="item.paymentmethod"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="回款内容" prop="remark">
                  <el-input
                    v-model="newFormInline.remark"
                    clearable
                    placeholder="请输入回款内容"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row justify="end">
              <el-button type="primary" @click="handleSubmit()"
                >新增回款</el-button
              >
            </el-row>
          </el-form>
        </el-card>
      </el-col>

      <!-- 订单查询 -->
      <el-col :span="14">
        <el-card class="search-card" shadow="never">
          <template #header>
            <span>订单查询</span>
          </template>

          <PlusSearch
            v-model="searchState"
            :columns="searchColumns"
            :has-unfold="false"
            :rowProps="{ gutter: 4 }"
            @search="handleSearch"
          />
          <PureTableBar title="查询结果" :columns="tableColumns">
            <template v-slot="{ dynamicColumns }">
              <!-- 批量操作【默认隐藏】 -->
              <div
                v-if="selectedNum > 0"
                v-motion-fade
                class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
              >
                <!-- 多选数量提示 -->
                <div class="flex-auto">
                  <span
                    style="font-size: var(--el-font-size-base)"
                    class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
                  >
                    已选 {{ selectedNum }} 项
                  </span>
                  <!-- @click="" -->
                  <el-button type="primary" text @click="onSelectionCancel">
                    取消选择
                  </el-button>
                </div>
                <el-button
                  type="danger"
                  text
                  class="mr-1"
                  @click="getSelectedRows"
                >
                  设置回款信息
                </el-button>
              </div>

              <pure-table
                ref="tableRef"
                max-height="400"
                :pagination="pagination"
                size="default"
                :columns="dynamicColumns"
                :data="searchList"
                :row-key="row => row.orderno"
                showOverflowTooltip
                @selection-change="handleSelectionChange"
                @page-current-change="handlePageChange"
                @page-size-change="handleSizeChange"
              ></pure-table>
            </template>
          </PureTableBar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped></style>
